JavaScript Nullish Coalescing: Bemästra tilldelning av standardvärden

JavaScript-utvecklare behöver ofta tilldela standardvärden när en variabel är null eller undefined. Före ES2020 var den logiska ELLER-operatorn (||) den primära metoden för att uppnå detta. Införandet av nullish coalescing-operatorn (??) erbjuder dock en mer precis och tillförlitlig lösning. Denna omfattande guide utforskar nyanserna i nullish coalescing, dess fördelar och praktiska exempel för att hjälpa dig bemästra denna kraftfulla funktion.

Förstå Nullish Coalescing (??)

Nullish coalescing-operatorn (??) är en logisk operator som returnerar sin högra operand när dess vänstra operand är null eller undefined. Annars returnerar den sin vänstra operand.

Syntax:

            leftOperand ?? rightOperand
            

              
                Copy
              
            
          

Huvudskillnad från logiskt ELLER (||):

Den logiska ELLER-operatorn (||) returnerar den högra operanden om den vänstra operanden är ett falsy-värde (null, undefined, 0, '', NaN, false). Detta kan leda till oväntat beteende när du endast avser att hantera null- eller undefined-värden.

Varför använda Nullish Coalescing?

Nullish coalescing erbjuder flera fördelar jämfört med den traditionella logiska ELLER-operatorn:

• Precision: Den riktar sig specifikt mot null och undefined, och undviker oavsiktliga standardtilldelningar för andra falsy-värden.
• Läsbarhet: Den kommunicerar tydligt avsikten att endast hantera null- eller undefined-fall, vilket förbättrar kodens underhållbarhet.
• Säkerhet: Den förhindrar oväntat beteende som orsakas av att falsy-värden oavsiktligt utlöser standardtilldelningar.

Praktiska exempel

1. Grundläggande tilldelning av standardvärden

Tilldela ett standardvärde till en variabel om den är null eller undefined:

            const userName = user.name ?? 'Guest';
console.log(userName); // Utskrift: 'Guest' om user.name är null eller undefined, annars det faktiska användarnamnet
            

              
                Copy
              
            
          

2. Hantering av API-svar

Hämta data från ett API och tillhandahålla ett standardvärde om svaret saknar en specifik egenskap:

            const apiResponse = {
  data: {
    city: null,
  },
};

const cityName = apiResponse.data.city ?? 'Unknown City';
console.log(cityName); // Utskrift: 'Unknown City'
            

              
                Copy
              
            
          

3. Standardkonfigurationer

Ställa in standardkonfigurationsalternativ för en komponent eller modul:

            const config = {
  theme: userSettings.theme,
  animationSpeed: userSettings.animationSpeed ?? 'normal',
};

console.log(config.animationSpeed); // Utskrift: 'normal' om userSettings.animationSpeed är null eller undefined
            

              
                Copy
              
            
          

4. Hantering av användarinställningar

Tillåta användare att anpassa inställningar och tillhandahålla standardvärden om de inte har angett en preferens:

            let userVolume = localStorage.getItem('volume'); // kan returnera null
let volume = userVolume ?? 0.5; // sätt en standardvolym på 0.5

console.log(`User volume is ${volume}`);
            

              
                Copy
              
            
          

5. Kedjning av Nullish Coalescing

Du kan kedja nullish coalescing-operatorn för att tillhandahålla en kaskad av standardvärden:

            const setting = userSetting.displaySetting.theme ?? defaultSettings.theme ?? 'light';
console.log(setting); // Utskrift: Det första värdet i kedjan som inte är null/undefined
            

              
                Copy
              
            
          

6. Arbeta med funktioner

Tilldela en standardfunktion om den angivna funktionen är null eller undefined:

            const logMessage = logger.log ?? (() => console.log('No logger available.'));
logMessage('This is a test message.');
            

              
                Copy
              
            
          

Nullish Coalescing med Optional Chaining

Nullish coalescing-operatorn passar perfekt ihop med optional chaining (?.), vilket gör att du säkert kan komma åt nästlade egenskaper utan att orsaka fel om en mellanliggande egenskap är null eller undefined.

Exempel:

            const user = {
  profile: {
    address: {
      city: null,
    },
  },
};

const cityName = user?.profile?.address?.city ?? 'Unknown City';
console.log(cityName); // Utskrift: 'Unknown City'
            

              
                Copy
              
            
          

I detta exempel, om någon av egenskaperna (user, profile, address, eller city) är null eller undefined, kommer optional chaining att kortslutas, och nullish coalescing-operatorn kommer att returnera standardvärdet 'Unknown City'.

Vanliga användningsfall i globala applikationer

Tänk på dessa internationella scenarier där nullish coalescing kan vara särskilt användbart:

• Lokalisering: Tillhandahålla standardöversättningar baserat på användarens locale. Om en översättning inte är tillgänglig för ett specifikt språk, kan en fallback till ett standardspråk (t.ex. engelska) implementeras.
• Valutaformatering: Visa valutavärden med lämplig formatering baserat på användarens region. Om de regionala inställningarna inte är tillgängliga kan ett standardvalutaformat tillämpas.
• Datum- och tidsformatering: Formatera datum och tider enligt användarens locale. Om locale-informationen saknas kan ett standardformat för datum och tid användas.
• Adressformatering: Visa adressinformation i rätt format för olika länder. Om landet inte är specificerat kan ett standardadressformat användas.

Exempel: Fallback för lokalisering

            const translatedText = localizedStrings[userLocale]?.greeting ?? localizedStrings['en-US'].greeting ?? "Hello!";
console.log(translatedText);
            

              
                Copy
              
            
          

Bästa praxis

• Använd ?? för null/undefined-kontroller: Föredra ?? framför || när du specifikt vill hantera null- eller undefined-värden.
• Kombinera med optional chaining: Använd ?? tillsammans med optional chaining (?.) för att säkert komma åt nästlade egenskaper.
• Undvik onödig komplexitet: Håll din kod ren och läsbar genom att endast använda ?? när det ger en tydlig fördel.
• Tänk på webbläsarkompatibilitet: Se till att dina målwebbläsare stöder nullish coalescing-operatorn (ES2020). Om du behöver stödja äldre webbläsare, använd en transpiler som Babel.
• Kodgranskningar: Uppmuntra kodgranskningar för att säkerställa korrekt användning av nullish coalescing-operatorn, särskilt i stora internationella projekt där feltolkningar av falsy-värden kan få betydande konsekvenser.

Webbläsarkompatibilitet

Nullish coalescing-operatorn är en relativt ny funktion i JavaScript (ES2020). Se till att dina målwebbläsare stöder den, eller använd en transpiler som Babel för att ge kompatibilitet för äldre webbläsare. Tänk på användardemografin för din applikation. Till exempel kan ett projekt som riktar sig till användare i länder med långsammare teknikanpassning kräva transpilering i högre grad än ett som riktar sig till användare i tekniskt framstående regioner.

Fällor att undvika

• Blanda ?? och || med &&: När man kombinerar nullish coalescing-operatorn (??) eller den logiska ELLER-operatorn (||) med den logiska OCH-operatorn (&&) utan explicita parenteser, kastar JavaScript ett syntaxfel. Använd alltid parenteser för att förtydliga operationsordningen.
• Förväxla ?? med ||: Kom ihåg den avgörande skillnaden: ?? kontrollerar endast för null och undefined, medan || kontrollerar för vilket falsy-värde som helst.

Exempel på fälla 1 (SyntaxError):

            // Detta kommer att kasta ett SyntaxError:
// const value = a ?? b && c;

// Rätt sätt (med parenteser):
const value = a ?? (b && c);
const value2 = (a ?? b) && c;
            

              
                Copy
              
            
          

Alternativ till Nullish Coalescing (för äldre webbläsare)

Om du behöver stödja äldre webbläsare som inte stöder nullish coalescing-operatorn kan du använda följande alternativ:

• Logisk ELLER-operator (||): Som nämnts tidigare är detta den traditionella metoden. Var dock medveten om problemet med falsy-värden.
• Ternär operator: Ett mer ordrikt men explicit sätt att kontrollera för null eller undefined.

Exempel: Ternär operator

            const value = a === null || a === undefined ? defaultValue : a;
            

              
                Copy
              
            
          

Slutsats

Nullish coalescing-operatorn (??) är ett värdefullt tillskott till JavaScript-språket, som ger ett mer precist och läsbart sätt att hantera tilldelning av standardvärden när man hanterar null- eller undefined-värden. Genom att förstå dess fördelar och nyanser kan du skriva renare, säkrare och mer underhållbar kod. Att kombinera den med optional chaining förbättrar ytterligare din förmåga att hantera komplexa datastrukturer på ett smidigt sätt. När du bygger applikationer för en global publik, tänk på konsekvenserna av null- och undefined-värden i olika kulturella och regionala sammanhang, och utnyttja nullish coalescing för att ge en konsekvent och användarvänlig upplevelse för alla.